<template>
  <div class="common-layout">
    <el-container>
      <el-header style="min-height: 6vh; margin-top: 1vh">
        <div class="header-content common-div-card">
          <el-form :model="headerSearchForm" label-width="auto" :inline="true">
            <el-form-item label="时间范围">
              <el-date-picker v-model="headerSearchForm.start" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" size="small" />
              &nbsp;-&nbsp;&nbsp;
              <el-date-picker v-model="headerSearchForm.end" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" size="small" />
            </el-form-item>
            <el-form-item label="计划号">
              <el-input v-model="headerSearchForm.planNo" size="small" />
            </el-form-item>
            <el-form-item label="入口卷号">
              <el-input v-model="headerSearchForm.entId" size="small" />
            </el-form-item>
            <el-form-item label="异常筛选" class="select">
              <el-select v-model="headerSearchForm.abnormalFilter" placeholder="请选择" clearable style="min-width: 10rem" size="small">
                <el-option label="全部" value="" />
                <el-option label="是" value="1" />
                <el-option label="否" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch" size="small">查询</el-button>
              <el-button type="primary" @click="handleReset" size="small">重置</el-button>
              <el-button type="primary" @click="handleReset" size="small">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main>
        <el-tabs v-model="activeTab" class="tabs" @tab-click="handleTabClick">
          <el-tab-pane label="酸轧TCM2280" name="tcm2280"></el-tab-pane>
          <el-tab-pane label="连退CAL1630" name="cal1630" />
          <el-tab-pane label="连退CAL2150" name="cal2150" />
          <el-tab-pane label="镀锌CGL1870" name="cgl1870"></el-tab-pane>
        </el-tabs>
        <!-- v-if="activeTab == 'tcm2280'" -->
        <div>
          <el-table
            :data="cglTableData"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            v-loading="loading"
            :show-overflow-tooltip="true"
            highlight-current-row
            :stripe="true"
            ref="tableRef"
            size="small"
            border
          >
            <el-table-column label="序号" fixed="left" type="index" width="60px" />
            <el-table-column prop="extId" label="出口卷号" fixed="left" />
            <el-table-column prop="prodEndTime" label="生产完成时间" fixed="left" />
            <el-table-column prop="planNo" label="计划号" fixed="left" />
            <el-table-column prop="seqNo" label="顺序号" fixed="left" />
            <el-table-column prop="entId" label="入口卷号" />
            <el-table-column prop="entSteelGrade" label="入口钢种" />
            <el-table-column prop="extSteelGrade" label="出口钢种" />
            <el-table-column prop="entThick" label="入口厚度[mm]" />
            <el-table-column prop="entWidth" label="入口宽度[mm]" />
            <el-table-column prop="entWeight" label="入口重量[kg]" />
            <el-table-column prop="extLength" label="入口长度[m]" />
            <el-table-column prop="extCtrlThick" label="出口控制厚度[mm]" />
            <el-table-column prop="extCtrlWidth" label="出口控制宽度[mm]" />
            <el-table-column label="规程过渡审核">
              <el-table-column prop="entThickFlg" label="入口厚度" />
              <el-table-column prop="extThickFlg" label="出口厚度" />
              <el-table-column prop="entWidthFlg" label="入口宽度" />
              <el-table-column prop="steelGradeFlg" label="钢种" />
            </el-table-column>
            <el-table-column prop="chemicalElement" label="化学元素" />
            <el-table-column label="命中率[%]">
              <el-table-column prop="thickHit" label="厚度" />
              <el-table-column prop="widthHit" label="宽度" />
              <el-table-column prop="convexityHit" label="凸度" />
              <el-table-column prop="bendHit" label="楔形" />
              <el-table-column prop="symmetryFlatnessHit" label="对称平坦度" />
              <el-table-column prop="asymmetryFlatnessHit" label="非对称平坦度" />
              <el-table-column prop="enduranceHit" label="终轧温度" />
              <el-table-column prop="LaminarCoolingTempHit" label="层冷温度" />
            </el-table-column>
            <el-table-column prop="isMixed" label="是否混浇坯" />
            <el-table-column prop="trimFlag" label="切边标记" />
            <el-table-column prop="trimWidth" label="切边后宽度[mm]" />
            <el-table-column prop="trimAlarm" label="切边报警" />
            <el-table-column prop="nextProcessUnit" label="下道机组" />
            <el-table-column prop="preProductionTime" label="预测生产时长" />
            <el-table-column prop="reductionRatio" label="压下率[%]" />
            <el-table-column prop="carbonEquivalent" label="碳当量" />
            <el-table-column prop="entCoilInnerDiameter" label="入口钢卷内径[mm]" />
            <el-table-column prop="entCoilOuterDiameter" label="入口钢卷外径[mm]" />
            <el-table-column prop="volCount" label="分卷个数" />
            <el-table-column prop="extWeight" label="出口重量[kg]" />
            <el-table-column prop="extWeightMin" label="出口质量最小值[kg]" />
            <el-table-column prop="extWeightMax" label="出口质量最大值[kg]" />
            <el-table-column prop="extThick" label="出口厚度[mm]" />
            <el-table-column label="出口控制厚度[mm]">
              <el-table-column prop="extCtrlThickMin" label="最小值" />
              <el-table-column prop="extCtrlThickMax" label="最大值" />
            </el-table-column>
            <el-table-column label="出口控制宽度[mm]">
              <el-table-column prop="extCtrlWidthMin" label="最小值" />
              <el-table-column prop="extCtrlWidthMax" label="最大值" />
            </el-table-column>
            <el-table-column prop="extCoilInnerDiameter" label="出口钢卷内径[mm]" />
            <el-table-column prop="targetSurfaceStructure" label="目标表面结构" />
            <el-table-column prop="hotCoilerNo" label="热轧卷取机号" />
            <el-table-column prop="hotProdEndTime" label="热轧生产完成时间" />
            <el-table-column prop="finalUse" label="最终用途" />
            <el-table-column prop="custcode" label="客户代码" />
            <el-table-column prop="tapMark" label="出钢记号" />
            <el-table-column prop="standard" label="标准" />
            <el-table-column prop="heatNo" label="熔炼号" />
            <el-table-column label="热轧卷取温度[°C]">
              <el-table-column prop="hotCoilerTarget" label="目标值" />
              <el-table-column prop="hotCoilerAvg" label="平均值" />
              <el-table-column prop="hotCoilerMin" label="最小值" />
              <el-table-column prop="hotCoilerMax" label="最大值" />
            </el-table-column>
            <el-table-column label="热轧终轧温度[°C]">
              <el-table-column prop="hotEndAvg" label="平均值" />
              <el-table-column prop="hotEndMin" label="最小值" />
              <el-table-column prop="hotEndMax" label="最大值" />
            </el-table-column>
            <el-table-column prop="slabNo" label="板坯号" />
            <el-table-column prop="convexity" label="凸度" />
            <el-table-column prop="convexityAvg" label="实际平均凸度" />
          </el-table>
        </div>
        <!-- <div v-if="activeTab == 'cgl1870'">
          <el-table
            :data="cglTableData"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            v-loading="loading"
            ref="tableRef"
            :show-overflow-tooltip="true"
            size="small"
            border
          >
            <el-table-column label="序号" fixed="left" type="index" width="60px" />
            <el-table-column prop="entId" label="入口卷号" fixed="left" />
            <el-table-column prop="planNo" label="计划号" fixed="left" />
            <el-table-column prop="seqNo" label="顺序号" fixed="left" />
            <el-table-column prop="extId" label="产出卷号" />
            <el-table-column prop="hotCoilNo" label="热卷号" />
            <el-table-column label="品规">
              <el-table-column prop="entSteelGrade" label="入口钢种" />
              <el-table-column prop="extSteelGrade" label="出口钢种" />
              <el-table-column prop="entThick" label="入口厚度[mm]" />
              <el-table-column prop="extThick" label="出口厚度[mm]" />
              <el-table-column prop="entWidth" label="入口宽度[mm]" />
              <el-table-column prop="extWidth" label="出口宽度[mm]" />
              <el-table-column prop="extLength" label="出口长度[mm]" />
            </el-table-column>
            <el-table-column label="规程过渡审核">
              <el-table-column prop="entThickFlg" label="入口厚度" />
              <el-table-column prop="entWidthFlg" label="入口宽度" />
              <el-table-column prop="steelGradeFlg" label="钢种" />
              <el-table-column prop="anSteelGradeFlg" label="退火钢种" />
            </el-table-column>
            <el-table-column prop="chemicalElement" label="化学元素" />
            <el-table-column label="命中率[%]">
              <el-table-column prop="thickHit" label="厚度" />
              <el-table-column prop="widthHit" label="宽度" />
              <el-table-column prop="convexityHit" label="凸度" />
              <el-table-column prop="bendHit" label="楔形" />
              <el-table-column prop="symmetryFlatnessHit" label="对称平坦度" />
              <el-table-column prop="asymmetryFlatnessHit" label="非对称平坦度" />
              <el-table-column prop="enduranceHit" label="终轧温度" />
              <el-table-column prop="LaminarCoolingTempHit" label="层冷温度" />
            </el-table-column>
            <el-table-column prop="isMixed" label="是否混浇坯" />
            <el-table-column prop="trimFlag" label="切边标记" />
            <el-table-column prop="trimWidth" label="切边后宽度[mm]" />
            <el-table-column prop="trimAlarm" label="切边报警" />
            <el-table-column prop="nextProcessUnit" label="下道机组" />
            <el-table-column prop="preProductionTime" label="预测生产时长" />
            <el-table-column prop="reductionRatio" label="压下率[%]" />
            <el-table-column prop="carbonEquivalent" label="碳当量" />
            <el-table-column prop="entCoilInnerDiameter" label="入口钢卷内径[mm]" />
            <el-table-column prop="entCoilOuterDiameter" label="入口钢卷外径[mm]" />
            <el-table-column prop="volCount" label="分卷个数" />
            <el-table-column prop="volCount" label="分卷个数" />
            <el-table-column prop="extWeight" label="出口重量[kg]" />
            <el-table-column prop="extWeightMin" label="出口质量最小值[kg]" />
            <el-table-column prop="extWeightMax" label="出口质量最大值[kg]" />
            <el-table-column prop="extThick" label="出口厚度[mm]" />
            <el-table-column label="出口控制厚度[mm]">
              <el-table-column prop="extCtrlThickMin" label="最小值" />
              <el-table-column prop="extCtrlThickMax" label="最大值" />
            </el-table-column>
            <el-table-column label="出口控制宽度[mm]">
              <el-table-column prop="extCtrlWidthMin" label="最小值" />
              <el-table-column prop="extCtrlWidthMax" label="最大值" />
            </el-table-column>
            <el-table-column prop="extCoilInnerDiameter" label="出口钢卷内径[mm]" />
            <el-table-column prop="targetSurfaceStructure" label="目标表面结构" />
            <el-table-column prop="hotCoilerNo" label="热轧卷取机号" />
            <el-table-column prop="hotProdEndTime" label="热轧生产完成时间" />
            <el-table-column prop="finalUse" label="最终用途" />
            <el-table-column prop="custcode" label="客户代码" />
            <el-table-column prop="tapMark" label="出钢记号" />
            <el-table-column prop="standard" label="标准" />
            <el-table-column prop="heatNo" label="熔炼号" />
            <el-table-column label="热轧卷取温度[°C]">
              <el-table-column prop="hotCoilerTarget" label="目标值" />
              <el-table-column prop="hotCoilerAvg" label="平均值" />
              <el-table-column prop="hotCoilerMin" label="最小值" />
              <el-table-column prop="hotCoilerMax" label="最大值" />
            </el-table-column>
            <el-table-column label="热轧终轧温度[°C]">
              <el-table-column prop="hotEndAvg" label="平均值" />
              <el-table-column prop="hotEndMin" label="最小值" />
              <el-table-column prop="hotEndMax" label="最大值" />
            </el-table-column>
            <el-table-column prop="slabNo" label="板坯号" />
            <el-table-column prop="convexity" label="凸度" />
            <el-table-column prop="convexityAvg" label="实际平均凸度" />
          </el-table>
        </div> -->
        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted, onUnmounted } from 'vue';
  import { ElMessage, ElTable, TabsPaneContext } from 'element-plus';

  const activeTab = ref('tcm2280');
  const handleTabClick = (tab: TabsPaneContext, event: Event) => {
    const name = String(tab.paneName ?? '');
    activeTab.value = name;
  };

  interface SearchForm {
    start: string;
    end: string;
    entId: string;
    planNo: string;
    abnormalFilter: string;
  }
  // 表单数据
  const headerSearchForm = reactive<SearchForm>({
    start: '',
    end: '',
    entId: '',
    planNo: '',
    abnormalFilter: '',
  });

  // 表格数据
  const tcmTableData = ref<any>([]);
  const cglTableData = ref<any>([
    {
      planNo: 'CGL-A250211107',
      entId: 'E2509-0001',
      entSteelGrade: 'DC03',
      extSteelGrade: 'GI50',
      entThick: 2.5,
      entWidth: 1250,
      entWeight: 21500,
      entLength: 1450,
      extThick: 0.35,
      extWidth: 1240,
      extLength: 1440,
      entThickFlg: '正常',
      extThickFlg: '正常',
      entWidthFlg: '正常',
      steelGradeFlg: '正常',
      chemicalElement: 'C0.03/Si0.02/Mn0.2',
      thickHit: 96.5,
      widthHit: 97.2,
      convexityHit: 94.1,
      bendHit: 95.3,
      symmetryFlatnessHit: 92.6,
      asymmetryFlatnessHit: 93.8,
      enduranceHit: 98.1,
      LaminarCoolingTempHit: 97.6,
      isMixed: '否',
      trimFlag: '是',
      trimWidth: 1236,
      trimAlarm: '无',
      nextProcessUnit: 'CAL1630',
      preProductionTime: '00:42:00',
      reductionRatio: 86.0,
      carbonEquivalent: 0.3,
      entCoilInnerDiameter: 610,
      entCoilOuterDiameter: 1780,
      volCount: 2,
      seqNo: '001',
      extId: 'E2509-0001-OUT',
      hotCoilNo: 'HC2509-0001',
      anSteelGradeFlg: '正常',
    },
    {
      planNo: 'CGL-A250211108',
      entId: 'E2509-0002',
      entSteelGrade: 'SPCC',
      extSteelGrade: 'GI40',
      entThick: 2.0,
      entWidth: 1210,
      entWeight: 19800,
      entLength: 1520,
      extThick: 0.28,
      extWidth: 1200,
      extLength: 1440,
      entThickFlg: '异常',
      extThickFlg: '正常',
      entWidthFlg: '正常',
      steelGradeFlg: '正常',
      chemicalElement: 'C0.02/Si0.01/Mn0.18',
      thickHit: 85.2,
      widthHit: 96.8,
      convexityHit: 93.5,
      bendHit: 94.7,
      symmetryFlatnessHit: 91.2,
      asymmetryFlatnessHit: 92.1,
      enduranceHit: 97.4,
      LaminarCoolingTempHit: 96.3,
      isMixed: '否',
      trimFlag: '否',
      trimWidth: 1200,
      trimAlarm: '无',
      nextProcessUnit: 'CAL2150',
      preProductionTime: '00:38:00',
      reductionRatio: 86.0,
      carbonEquivalent: 0.28,
      entCoilInnerDiameter: 508,
      entCoilOuterDiameter: 1720,
      volCount: 1,
      seqNo: '002',
      extId: 'E2509-0002-OUT',
      hotCoilNo: 'HC2509-0002',
      anSteelGradeFlg: '正常',
    },
    {
      planNo: 'CGL-A250211109',
      entId: 'E2509-0003',
      entSteelGrade: 'Q195',
      extSteelGrade: 'GI60',
      entThick: 2.8,
      entWidth: 1300,
      entWeight: 22560,
      entLength: 1380,
      extThick: 0.42,
      extWidth: 1288,
      extLength: 1440,
      entThickFlg: '正常',
      extThickFlg: '正常',
      entWidthFlg: '异常',
      steelGradeFlg: '正常',
      chemicalElement: 'C0.05/Si0.02/Mn0.30',
      thickHit: 94.0,
      widthHit: 88.5,
      convexityHit: 92.3,
      bendHit: 93.6,
      symmetryFlatnessHit: 90.5,
      asymmetryFlatnessHit: 91.9,
      enduranceHit: 96.2,
      LaminarCoolingTempHit: 95.1,
      isMixed: '是',
      trimFlag: '是',
      trimWidth: 1284,
      trimAlarm: '轻微',
      nextProcessUnit: 'CGL1870',
      preProductionTime: '00:55:00',
      reductionRatio: 85.0,
      carbonEquivalent: 0.33,
      entCoilInnerDiameter: 610,
      entCoilOuterDiameter: 1820,
      volCount: 3,
      seqNo: '003',
      extId: 'E2509-0003-OUT',
      hotCoilNo: 'HC2509-0003',
      anSteelGradeFlg: '异常',
    },
    {
      planNo: 'CGL-A250211110',
      entId: 'E2509-0004',
      entSteelGrade: 'Q235',
      extSteelGrade: 'GI50',
      entThick: 2.2,
      entWidth: 1220,
      entWeight: 20540,
      entLength: 1490,
      extThick: 0.32,
      extWidth: 1212,
      extLength: 1440,
      entThickFlg: '正常',
      extThickFlg: '正常',
      entWidthFlg: '正常',
      steelGradeFlg: '异常',
      chemicalElement: 'C0.06/Si0.01/Mn0.25',
      thickHit: 96.1,
      widthHit: 95.9,
      convexityHit: 93.8,
      bendHit: 94.0,
      symmetryFlatnessHit: 92.5,
      asymmetryFlatnessHit: 93.0,
      enduranceHit: 97.0,
      LaminarCoolingTempHit: 96.0,
      isMixed: '否',
      trimFlag: '否',
      trimWidth: 1212,
      trimAlarm: '无',
      nextProcessUnit: 'CAL1630',
      preProductionTime: '00:41:00',
      reductionRatio: 85.5,
      carbonEquivalent: 0.34,
      entCoilInnerDiameter: 508,
      entCoilOuterDiameter: 1750,
      volCount: 2,
      seqNo: '004',
      extId: 'E2509-0004-OUT',
      hotCoilNo: 'HC2509-0004',
      anSteelGradeFlg: '正常',
    },
    {
      planNo: 'CGL-A250211111',
      entId: 'E2509-0005',
      entSteelGrade: 'SGCC',
      extSteelGrade: 'GI70',
      entThick: 1.8,
      entWidth: 1180,
      entWeight: 18520,
      entLength: 1600,
      extThick: 0.25,
      extWidth: 1170,
      extLength: 1440,
      entThickFlg: '正常',
      extThickFlg: '正常',
      entWidthFlg: '正常',
      steelGradeFlg: '正常',
      chemicalElement: 'C0.01/Si0.00/Mn0.15',
      thickHit: 97.8,
      widthHit: 98.2,
      convexityHit: 96.1,
      bendHit: 95.7,
      symmetryFlatnessHit: 94.3,
      asymmetryFlatnessHit: 94.9,
      enduranceHit: 98.5,
      LaminarCoolingTempHit: 97.9,
      isMixed: '否',
      trimFlag: '是',
      trimWidth: 1168,
      trimAlarm: '无',
      nextProcessUnit: '出货',
      preProductionTime: '00:36:00',
      reductionRatio: 86.1,
      carbonEquivalent: 0.25,
      entCoilInnerDiameter: 610,
      entCoilOuterDiameter: 1705,
      volCount: 1,
      seqNo: '005',
      extId: 'E2509-0005-OUT',
      hotCoilNo: 'HC2509-0005',
      anSteelGradeFlg: '正常',
    },
    {
      planNo: 'CGL-A250211112',
      entId: 'E2509-0006',
      entSteelGrade: 'DX51D',
      extSteelGrade: 'GI80',
      entThick: 1.5,
      entWidth: 1150,
      entWeight: 16800,
      entLength: 1680,
      extThick: 0.22,
      extWidth: 1140,
      extLength: 1440,
      entThickFlg: '正常',
      extThickFlg: '正常',
      entWidthFlg: '正常',
      steelGradeFlg: '正常',
      chemicalElement: 'C0.008/Si0.001/Mn0.12',
      thickHit: 98.2,
      widthHit: 98.5,
      convexityHit: 96.8,
      bendHit: 96.2,
      symmetryFlatnessHit: 95.1,
      asymmetryFlatnessHit: 95.6,
      enduranceHit: 98.8,
      LaminarCoolingTempHit: 98.2,
      isMixed: '否',
      trimFlag: '是',
      trimWidth: 1138,
      trimAlarm: '无',
      nextProcessUnit: 'CAL2150',
      preProductionTime: '00:32:00',
      reductionRatio: 85.3,
      carbonEquivalent: 0.22,
      entCoilInnerDiameter: 610,
      entCoilOuterDiameter: 1680,
      volCount: 1,
      seqNo: '006',
      extId: 'E2509-0006-OUT',
      hotCoilNo: 'HC2509-0006',
      anSteelGradeFlg: '正常',
    },
    {
      planNo: 'CGL-A250211113',
      entId: 'E2509-0007',
      entSteelGrade: 'Q345B',
      extSteelGrade: 'GI45',
      entThick: 3.0,
      entWidth: 1350,
      entWeight: 24800,
      entLength: 1320,
      extThick: 0.45,
      extWidth: 1338,
      extLength: 1440,
      entThickFlg: '正常',
      extThickFlg: '异常',
      entWidthFlg: '正常',
      steelGradeFlg: '正常',
      chemicalElement: 'C0.08/Si0.03/Mn0.35',
      thickHit: 93.5,
      widthHit: 95.8,
      convexityHit: 91.8,
      bendHit: 92.9,
      symmetryFlatnessHit: 89.2,
      asymmetryFlatnessHit: 90.5,
      enduranceHit: 95.8,
      LaminarCoolingTempHit: 94.7,
      isMixed: '是',
      trimFlag: '是',
      trimWidth: 1334,
      trimAlarm: '严重',
      nextProcessUnit: 'CGL1870',
      preProductionTime: '01:05:00',
      reductionRatio: 85.0,
      carbonEquivalent: 0.38,
      entCoilInnerDiameter: 610,
      entCoilOuterDiameter: 1850,
      volCount: 4,
      seqNo: '007',
      extId: 'E2509-0007-OUT',
      hotCoilNo: 'HC2509-0007',
      anSteelGradeFlg: '异常',
    },
    {
      planNo: 'CGL-A250211114',
      entId: 'E2509-0008',
      entSteelGrade: 'DC04',
      extSteelGrade: 'GI55',
      entThick: 2.3,
      entWidth: 1280,
      entWeight: 21200,
      entLength: 1480,
      extThick: 0.33,
      extWidth: 1270,
      extLength: 1440,
      entThickFlg: '正常',
      extThickFlg: '正常',
      entWidthFlg: '正常',
      steelGradeFlg: '正常',
      chemicalElement: 'C0.025/Si0.015/Mn0.22',
      thickHit: 97.1,
      widthHit: 97.6,
      convexityHit: 95.2,
      bendHit: 95.8,
      symmetryFlatnessHit: 93.7,
      asymmetryFlatnessHit: 94.2,
      enduranceHit: 98.3,
      LaminarCoolingTempHit: 97.4,
      isMixed: '否',
      trimFlag: '否',
      trimWidth: 1270,
      trimAlarm: '无',
      nextProcessUnit: 'CAL1630',
      preProductionTime: '00:39:00',
      reductionRatio: 85.7,
      carbonEquivalent: 0.29,
      entCoilInnerDiameter: 508,
      entCoilOuterDiameter: 1760,
      volCount: 2,
      seqNo: '008',
      extId: 'E2509-0008-OUT',
      hotCoilNo: 'HC2509-0008',
      anSteelGradeFlg: '正常',
    },
  ]);
  const tableRef = ref<InstanceType<typeof ElTable>>();
  const loading = ref(false);

  // 分页数据
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
  });

  // 获取表格数据
  const fetchTableData = async () => {
    loading.value = true;
    try {
      const param = {
        page: {
          pageIndex: pagination.currentPage,
          pageSize: pagination.pageSize,
        },
        dto: {
          // entId: headerSearchForm.entId,
          // steelGrade: headerSearchForm.steelGrade,
          // wtMisMatchFlag: headerSearchForm.wtMisMatchFlag,
        },
      };
      // const res = await api.page(param);
      // tableData.value = res.data.data.records;
      // pagination.total = res.data.count;
      loading.value = false;
    } catch (error) {
      loading.value = false;
      ElMessage.error('获取数据失败');
    }
  };

  // 查询方法
  const handleSearch = () => {
    pagination.currentPage = 1;
    fetchTableData();
  };

  // 重置方法
  const handleReset = () => {
    (Object.keys(headerSearchForm) as Array<keyof SearchForm>).forEach((key) => {
      headerSearchForm[key] = '';
    });
    handleSearch();
  };

  // 分页大小变化
  const handleSizeChange = (val: number) => {
    pagination.pageSize = val;
    fetchTableData();
  };

  // 页码变化
  const handleCurrentChange = (val: number) => {
    pagination.currentPage = val;
    fetchTableData();
  };

  // 生命周期钩子
  onMounted(() => {
    fetchTableData();
  });

  onUnmounted(() => {});
</script>
<style lang="less" scoped>
  @border-radius: 4px;
  @primary-color: #2c69e8;
  @box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  @box-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  @border: 1px solid #dcdfe6;

  .common-div-card {
    box-shadow: @box-shadow;
    border-radius: @border-radius;
    // border: @border;
  }

  .common-layout {
    width: 99vw;
    min-height: 100vh;
    background-color: #fff;
  }

  .header-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 2rem;
    max-height: 6vh;

    .el-form {
      margin-top: 2vh;
    }
  }

  .table-container {
    padding: 0.5rem;
    // height: 70vh;

    :deep(.el-table) {
      max-width: 100%;
      height: 92%;
    }

    .table-info {
      margin: 0.5rem;
      color: #000;
    }
  }

  .pagination {
    margin-top: 2vh;
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }

  .warning-row {
    background-color: '#ffe6e6';
  }

  .el-text {
    color: rgb(121, 187, 255);
    font-weight: 700;
  }
</style>
